<template>
    <div class="table">
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem><Icon type="ios-construct" /> 角色权限</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div style="margin-bottom: 20px;">
            <Button type="primary" icon="md-add" @click="add">添加</Button>
        </div>


        <ul id="list" ref="list">
            <li draggable="true" class="clearfix"
                v-for="(item, index) in tableData" 
                :data-id="item.id" 
                :data-index="index" 
                :key="item.id"
                @dragstart="dragstartEvent"
                @dragend="dragendEvent"
                @dragenter="dragenterEvent"
                @dragleave="dragleaveEvent"
                @dragover="dragoverEvent"
                @drop="dropEvent"
            >
                <div>{{item.name}}</div>
                <div>{{item.id}}</div>
                <Button v-if="item.id == 1" disabled icon="ios-create-outline" @click="handleEdit(item.id)">编辑权限</Button>
                <Button v-if="item.id > 1" icon="ios-create-outline" @click="handleEdit(item.id)">编辑权限</Button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: pub.apiDomain + 'role',
                tableData: [],
                dragElement: null,
                lock: true,
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //加载内容：在翻页或搜索后
            getData(){
                //列表数据
                this.$axios.get(this.url + '/ls').then(res => {
                    this.tableData = res.d;
                });
            },
            add(){
                this.$router.push('/role/add');
            },
            //编辑
            handleEdit(id) {
                this.$router.push('/role/'+id);
            },

            //拖拽开始(参数是原始元素)
            dragstartEvent(ev) {
                ev.dataTransfer.setData("start", ' ');  //必须写这行,兼容火狐
                this.dragElement = ev.target;
                ev.target.style.backgroundColor = '#f8f8f8';
            },
            //进入元素(目标元素)
            dragenterEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
                }
            },
            //移动过程
            dragoverEvent(ev) {
                ev.preventDefault();
            },
            //离开元素(目标元素)
            dragleaveEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
                        ev.target.parentNode.appendChild(this.dragElement);
                        this.lock = false;
                    }else{
                        this.lock = true;
                    }
                }
            },
            //拖拽结束(目标元素元素)
            dropEvent(ev) {
                ev.preventDefault();
            },
            //拖拽结束(原始元素)
            dragendEvent(ev) {
                ev.target.style.backgroundColor = '#fff';
                let ids = [];
                this.$refs.list.querySelectorAll('li').forEach(e => {
                    ids.push(e.getAttribute('data-id'));
                });
                this.$axios.post(this.url + '/px', {ids}).then(res => {
                    this.$Message.success('保存顺序成功');
                });
                ev.preventDefault();
            },
        }
    }
</script>
<style>
.content{background: #fff;}
</style>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}
#list{width:600px;}
#list>li{clear:both;list-style: none; padding: 6px 12px;margin-bottom: 6px;line-height: 32px;border-radius: 6px;border:1px solid #ccc;}
#list button{float:left;}
#list>li>div, #list>li>button{float:left;width: 160px;}
#list>li>div:nth-child(2){width:80px;}
</style>